<template>
    <div class="TopNav">
        <div class="TopNav_top container">
            <!-- <section>
                <div v-for="item in this.$store.state.cart.cartArr" :key="item.id">{{item.s_good.name}}</div>
            </section> -->
            <div class="t-t-left">
                <a href="">DJI 大疆官网</a>
                <span>全场满 ¥99 包邮。下单即享 1% DJI币返点。</span>
            </div>
            <div class="t-t-right">
                <a href="">
                    <template>
                        <a-popover
                            width="500px"
                            placement="bottom"
                        >
                            <template slot="content">
                                <span class="noLogin" v-if="token === ''">还没登陆呢</span>
                                <div class="cart" v-if="token !== ''">
                                    <div class="cart-record" v-for="item in this.$store.state.cart.cartArr" :key="item.id">
                                        <a href="">
                                            <div class="img">
                                                <img :src="item.s_good.s_goods_photos[0].path"  alt="">
                                            </div>
                                            <div class="info">
                                                <span class="productName">{{item.s_good.name}}</span>
                                                <span>{{item.num}} * {{item.s_good.price}}</span>
                                            </div>
                                        </a>     
                                    </div>
                                </div>
                                <div class="settlement" v-if="token !== ''">
                                    <div class="settlement-top">
                                        <span>共 {{count}} 件商品</span>
                                        <span class="price">￥{{allPrice}}</span>
                                    </div>
                                    <div class="settlement-bottom">
                                        <button @click="goToCart">去结算</button>
                                    </div>
                                </div>
                            </template>
                            <a type="">
                                <div class="img">
                                    <img src="../assets/img/index/svg/ia_10016.svg" alt="">
                                </div>
                                <span>购物车</span><span class="num" v-if="token !== ''">{{count}}</span>
                            </a>
                        </a-popover>
                    </template>
                </a>
                <span>|</span>
                <nav-dropdown v-if="token !== ''" />
                <div class="actions" v-if="token === ''">
                    <router-link :to="'/account/login'">登录</router-link><span>|</span>
                    <router-link :to="'/account/register'">注册</router-link>
                </div>
            </div>    
        </div>
        <div class="TopNav_bottom">
            <div class="container">
                <div class="t_b_Left">
                    <div class="logo">
                        <a href="">
                            <img src="../assets/img/index/img/logo.png" alt="">
                            <span>商城</span>
                        </a>
                    </div>
                    <ul>
                        <li @mouseover="show" @mouseout="noshow">商品类别</li>
                        <li><a href="">以旧换新</a></li>
                        <li><a href="">购机指南</a></li>
                        <li><a href="">精彩活动</a></li>
                        <li><a href="">服务与支持</a></li>
                    </ul>
                </div>
                <div class="t_b_right">
                    <div class="search">
                        <div class="input">
                            <input type="text" v-model="searchName" placeholder="搜索商品...">
                        </div>
                        <div class="img">
                            <a @click="search">
                                <img src="../assets/img/index/svg/ia_10017.svg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <dropdown :data="display" />
        
    </div>
  
</template>

<script>
import navDropdown from './navDropdown.vue'
import {mapState,mapActions,mapGetters} from 'vuex'
import dropdown from './dropDown'
export default {
    components: {
        dropdown,
        navDropdown,
    },
    data() {
        return {
            display:'none',
            token: localStorage.getItem('token') || '',
            searchName:'',
        }
    },
    computed: {
        ...mapState('loginInfo',['userInfo']),
        count() {
            if(this.token !== ''){
                let count = this.$store.state.cart.cartArr.reduce((sum,prod)=>sum + prod.num,0);
                return count
            }
        },
        allPrice() {
            if(this.token !== '') {
                let allPrice = this.$store.state.cart.cartArr.reduce((sum,prod)=>sum + prod.num * prod.s_good.price,0)
                return allPrice
            }
        }

    },
    created() {
        // console.log(this.cartArr);
        if(this.token !== '') {
            this.getUserInfo()
            this.getCartArr();
        }
        //  console.log(this.cartArr);
    },
    methods: {
        ...mapActions('cart',['getCartArr']),
        ...mapActions('loginInfo',['getUserInfo']),
        show() {
            this.display = 'block'
        },
        noshow() {
            this.display = 'none'
        },
        goToCart() {
            this.$router.push('/cart')
        },
        search() {
            if(this.searchName !== '') {
                this.$router.push(`/searchproducts/${this.searchName}`)
            }
        }
    }
}
</script>

<style lang="scss">
@import "@/assets/scss/TopNav.scss";

</style>